<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
  </body>
  <script type="text/babel">
  
    class Logger extends React.Component{
        constructor(props){
            super(props);
            // console.log(this.props);
            this.state = {
                time:new Date(),
                age:200,
                isShow:true,
                numberList:[1,2,3,4,5,6],
                name:"Input Data",
                age1:"250",
            }

            // this.testRef = React.createRef();
        }
        componentDidMount(){
            // this.testRef.current.value = "tim";
            this.interval = setInterval(() => {
                this.setState({
                    time:new Date(),
                    age:this.state.age + Number(this.props.age)
                })
            },1000);
        }
        componentWillUnmount(){
            clearInterval(this.interval);
        }

        // 自定义事件
        stopInterval =(e)=>{
            this.setState((state)=>({
                isShow:!state.isShow
            }))
        }
        //提价表单
        submitData =(e)=> {
            console.log(this.state)
            e.preventDefault();

        }
        //表单数据更改
        changeInputData =(e)=> {
            // console.log(e.target.value);
            // console.log(e.target.name);
            this.setState({
                [e.target.name]:e.target.value
            })            
        }
        
        // 测试事件
        TimClick = (e)=> {
            console.dir(this.testRef.value);
        }

        render(){
            let liStyle = {
                    listStyle:"none"
                }
                

            return(
                <div>
                    <h1>{this.state.time.toLocaleTimeString()}</h1>
                    <h2>{this.state.age}</h2>
                    <button onClick={(e)=>{
                        this.stopInterval(123,e)
                    }}>暂停</button>
                    {this.state.isShow && <h2>在的!</h2>}
                    <ul>
                        {
                            this.state.numberList.map((item,index)=>{
                                return <li key={item} style={liStyle}>{item}</li>
                            })
                        }
                    </ul>
                    <form onSubmit={this.submitData}>
                        name:<input type="text" defaultValue="Tim" name="name" ref={(input) => {this.testRef = input}} />
                        age:<input type="text" onChange={this.changeInputData}  value={this.state.age1} name="age1" />
                        <input type="submit" value="Submit" />
                    </form>
                    <div onClick={(e)=>{this.TimClick(123)}}>{`wjy ${123 + 123}`}</div>
                    <We name={this.state.name}></We>
                </div>             
            )
        }
    }

    function  We(props) {
        function weClick(){
            console.log("weclick");
        }

        return(
            <h2 onClick={weClick}>{props.name}</h2>
        )
    }
    
    ReactDOM.render(<Logger age="100" />,document.getElementById("example"));

  </script>
</html>
